<template>
  <div class="w-full h-full" id="test-com">
    <div>width: {{ width }}</div>
    <div>height: {{ height }}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        width: 0,
        height: 0,
      }
    },
    created() {
      this.calc()
      window.onresize = this.calc
    },
    methods: {
      calc() {
        const dom = document.querySelector('#test-com')
        this.width = dom.offsetWidth
        this.height = dom.offsetHeight
      },
    },
  }
</script>
